<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.min.3.4.1.js"></script>

    <script>
        $(function () {
            /*选择第一个li*/
            $('button:eq(0)').click(function () {
                // .first() 方法选中第一个
                $('li').first().css('backgroundColor', 'red');
            });

            /*选择最后一个li*/
            $('button:eq(1)').click(function () {
                $('li').last().css('backgroundColor', 'red');
            })

            /*选择所有li排除最后一个*/
            $('button:eq(2)').click(function () {
                /********************************************
                *          'li:not(:last())'  排除最后一个
                * */
                $('li:not(:last())').css('backgroundColor', 'red')
            });

            /*选择所有li排除第二个*/
            $('button:eq(3)').click(function () {
                $('li:not(:eq(1))').css('backgroundColor', 'red');
            });

            /*选择所有索引值为偶数个li*/
            $('button:eq(4)').click(function () {
                //even表示元素的索引
                $('li:even').css('backgroundColor', 'red');
            });

            /*选择所有索引值为奇数个li*/
            $('button:eq(5)').click(function () {
                //odd表示元素的索引
                $('li:odd').css('backgroundColor', 'red');
            });


            /*选择大于第5个的li*/
            $('button:eq(6)').click(function () {
                //gt(5) 从元素索引开始
                $('li:gt(5)').css('backgroundColor', 'red');
            });

            /*选择小于第5个的li*/
            $('button:eq(7)').click(function () {
                //lt(5) 从元素索引开始
                $('li:lt(5)').css('backgroundColor', 'red');
            });

            /*选择等于第5个的li*/
            $('button:eq(8)').click(function () {
                $('li:eq(5)').css('backgroundColor', 'red');
            });

            /*选择所有的标题*/
            $('button:eq(9)').click(function () {
                $(':header').css('backgroundColor', 'red');
            });


        })

    </script>
</head>

<body>

    <button>$('li:first')选择第一个li</button><br>
    <button>$('li:last')选择最后一个li</button><br>
    <button>$('li:not(:eq(1))')选择所有li排除最后一个</button><br>
    <button>$('li:not(:eq(1))')选择所有li排除第二个</button><br>
    <button>$('li:even')选择所有索引值为偶数个li</button><br>
    <button>$('li:odd')选择所有索引值为奇数个li</button><br>
    <button>$('li:gt(5)')选择大于第5个的li</button><br>
    <button>$('li:lt(5)')选择小于第5个的li</button><br>
    <button>$('li:eq(5)')选择等于第5个的li</button><br>
    <button>$(':header')选择所有的标题</button><br>

    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>

    <ul>
        <li>这是一个li-1</li>
        <li>这是一个li-2</li>
        <li>这是一个li-3</li>
        <li>这是一个li-4</li>
        <li>这是一个li-5</li>
        <li>这是一个li-6</li>
        <li>这是一个li-7</li>
        <li>这是一个li-8</li>
        <li>这是一个li-9</li>
    </ul>
</body>

</html>